<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"
	contentType="text/html; charset=UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>特殊考勤</title>
<link rel="stylesheet" type="text/css"
	href="<%=path%>/jquery-easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css"
	href="<%=path%>/jquery-easyui/themes/icon.css">
<script type="text/javascript"
	src="<%=path%>/jquery-easyui/jquery-1.8.0.js"></script>
<script type="text/javascript"
	src="<%=path%>/jquery-easyui/jquery.easyui.min.js"></script>
<script type="text/javascript"
	src="<%=path%>/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript" src="<%=path%>/js/jquery.json-2.4.js"></script>
<script type="text/javascript" src="<%=path%>/js/post.js"></script>
<script type="text/javascript" src="<%=path%>/js/util.js"></script>
<script type="text/javascript">
	var path = '${pageContext.request.contextPath}';

	function print(){
		var tree = $('#treeDepartment');
		var row = tree.treegrid('getSelected');
		if (!row) {
			return;
		}
		
		var start = $('#selectStartDate').datebox('getValue');
		var end = $('#selectEndDate').datebox('getValue');
		var name = $('#searchName').val();
		var id = row.id;
		
		var url = path + '/special/print/?id=' + id;
		url += '&name=' + name;
		url += '&startDate=' + start;
		url += '&endDate=' + end;
		window.open(url, "_blank", "toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,status=no");
	}
	
	function onLoadSuccessTree(row, data) {
		var tree = $('#treeDepartment');
		var root = tree.treegrid('getRoot');
		if (!root) {
			return;
		}
		tree.treegrid('select',root.id);
		loadEmployeeGird();
	}

	function onClickRowTree(){
		var key=$('#searchKey').val();
		loadEmployeeGird(key);
	}
	
	function loadEmployeeGird(key){
		var tree = $('#tree');
		var row = tree.treegrid('getSelected');
		
		if (!row) {
			return;
		}
		var grid = $('#gridEmployee');
		grid.datagrid('loadData', []);
		grid.datagrid('load', { 
			id : row.id,
			key : key
		});
	}
	
	function setEmployee(){
		var grid=$('#gridEmployee');
		var row = grid.datagrid('getSelected');
		if (!row) {
			$.messager.alert('提示','请选择数据!');
			return;
		}
		$('#employeeId').val(row.id);
		$('#employeeName').val(row.name);
		$('#dlgEmployee').dialog('close');
	}
	
	function selectEmployee() {
		$('#dlgEmployee').dialog('open');
	}

	function show() {
		var form = $('#formSpecial');
		form.form('clear');

		var date = new Date();
		var dateString = date.getFullYear() + '-' + (date.getMonth() + 1) + '-'
				+ date.getDate() + ' ' + date.getHours() + ':'
				+ date.getMinutes() + ':' + date.getSeconds();

		$('#specialcardDate').datebox('setValue', dateString);

		$('#dlgSpecial').dialog('open');
	}
	
	function showUpload(){
		var form=$('#formUpload');
		form.form('clear');
		$('#dlgUpload').dialog('open');
	}
	
	function uploadData(){
		var form= $('#formUpload');
		var url= path + '/special/import/';
		$.messager.progress();	
		form.form('submit', {
			url: url,
			success: function(d){
				$.messager.progress('close');
				$('#dlgUpload').dialog('close');
				
				showImport($.parseJSON(d));
			},
			error : function() {
				$.messager.progress('close');
				$.messager.alert('错误', '无法处理！', 'error');
			}
		});
	}
	
	function showImport(d){
		var grid=$('#gridImport');
		grid.datagrid('loadData', d);
		$('#dlgImport').dialog('open');
	}
	
	function saveAll(){
		var grid=$('#gridImport');
		var data = grid.datagrid('getData');
		if (!data || !data.rows || data.rows.length < 1) {
			return;
		}
		
		if (!data.footer || data.footer.length < 1 || !data.footer[0].reason) {
			saveAllData(grid, data);
		}
		else{
			$.messager.confirm('询问', '文件中有错误数据，确定要导入这些记录吗?', function(r) {
				if (!r) {
					return;
				}
				saveAllData(grid, data);
			});
		}
	}
	
	function saveAllData(grid,data){
		var url = path + '/special/saveAll/';	
		var json = JSON.stringify(data.rows);
		
		$.messager.progress({
			title : '系统提示',
			msg : '处理中，请稍候...'
		});
	
		$.ajax({
			type : "POST",
			url : url,
			data : 'json=' + json,
			success : function(data) {
	
				$.messager.progress('close');
	
				if (data.isSucess) {
	
					$('#dlgImport').dialog('close');
					$.messager.show({
						title : '系统提示',
						msg : '处理成功！',
						timeout : 2000,
						showType : 'slide'
					});
	
					$('#grid').datagrid('load');
				} else {
					$.messager.alert('错误', data.message, 'error');
				}
			},
			error : function() {
				$.messager.progress('close');
				$.messager.alert('错误', '无法处理！', 'error');
			}
		});
	}

	function save() {
		var name='special';
		var url = path + '/'+name+'/save/';		
		postJson($('#dlgSpecial'), $('#formSpecial'), $('#grid'), url, name);
	}
	
	function del() {
		var grid = $('#grid');
		var url = path + '/special/delete/';
		delById(grid, url);
	}
	
	function search() {
		var tree = $('#treeDepartment');
		var row = tree.treegrid('getSelected');		
		if (!row) {
			var root = tree.treegrid('getRoot');
			if (!root) {
				return;
			}
			tree.treegrid('select',root.id);
			row = root;
		}	
		var start = $('#selectStartDate').datebox('getValue');
		var end = $('#selectEndDate').datebox('getValue');
		var name = $('#searchName').val();
		var grid = $('#grid');
		grid.datagrid('load', {
			id : row.id,
			name : name,
			startDate : start,
			endDate : end
		});
	}
	
	function setNowDate() {
		var date = new Date();
		date.setDate(1);
		$('#selectStartDate').datebox('setValue', date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate());
		date.setMonth(date.getMonth() + 1);
		date.setDate(date.getDate() - 1);
		$('#selectEndDate').datebox('setValue', date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate());
	}
	
	$(function(){
		setNowDate();
	});
</script>
</head>
<body class="easyui-layout">
	<!-- 上传-->
	<div id="dlgUpload" class="easyui-dialog" title="上传文件"
		style="width:320px;height:150px;padding:10px"
		data-options="
				closed: true,
				modal: true,
				iconCls: 'icon-save',				
				buttons: [{
					text:'確定',
					iconCls:'icon-ok',
					handler:function(){
						uploadData();
					}
				},{
					text:'取消',
					iconCls:'icon-cancel',
					handler:function(){
						$('#dlgUpload').dialog('close');
					}
				}]
			">
		<form id="formUpload" method="post" enctype="multipart/form-data">
			<table>
				<tr>
					<td>文件:</td>
					<td><input name="filedata" type="file" />
					</td>
				</tr>
			</table>
		</form>
		<a href="<%=path%>/data/special.xls" class="easyui-linkbutton"
			iconCls="icon-add" plain="true">模板下载</a> <a
			href="<%=path%>/data/specialList.xls" class="easyui-linkbutton"
			iconCls="icon-add" plain="true">范例下载</a>
	</div>

	<!-- 导入 -->
	<div id="dlgImport" class="easyui-dialog" title="导入"
		style="width:680px;height:420px;padding:10px"
		data-options="
				closed: true,
				modal: true,
				iconCls: 'icon-save',				
				buttons: [{
					text:'確定',
					iconCls:'icon-ok',
					handler:function(){
						saveAll();
					}
				},{
					text:'取消',
					iconCls:'icon-cancel',
					handler:function(){
						$('#dlgImport').dialog('close');
					}
				}]
			">
		<table id="gridImport" class="easyui-datagrid"
			data-options="
			remoteSort: false,
			idField: 'id',
			fit: true,
			singleSelect: true,
			collapsible: true,
			rownumbers: true,
			showFooter: true,
			striped: true
			">
			<thead>
				<tr>
					<th data-options="field:'employeeCode',width:80">员工编号</th>
					<th data-options="field:'employeeName',width:80">员工姓名</th>
					<th data-options="field:'cardDate',width:120">考勤日期</th>
					<th data-options="field:'reason',width:240">原因</th>
				</tr>
			</thead>
		</table>
	</div>

	<!-- 选择员工窗體 -->
	<div id="dlgEmployee" class="easyui-dialog" title="选择员工"
		style="width:680px;height:400px;padding:10px"
		data-options="
				closed: true,
				modal: true,
				iconCls: 'icon-save',				
				buttons: [{
					text:'確定',
					iconCls:'icon-ok',
					handler:function(){
						setEmployee();
					}
				},{
					text:'取消',
					iconCls:'icon-cancel',
					handler:function(){
						$('#dlgEmployee').dialog('close');
					}
				}]
			">
		<div class="easyui-layout" data-options="fit:true">
			<!-- 部门 -->
			<div data-options="region:'west',split:true" style="width:160px;">
				<table id="tree" class="easyui-treegrid"
					data-options="
				fit:true,
				url: '<%=path%>/department/loadAll',
				idField: 'id',
				treeField: 'name',
				onLoadSuccess: onLoadSuccessTree,
				onClickRow: onClickRowTree,
				queryParams:{id:2}
			">
					<thead>
						<tr>
							<th data-options="field:'name'" width="140">部门名称</th>
						</tr>
					</thead>
				</table>
			</div>

			<!-- 选择员工工具栏 -->
			<div id="tbEmployee" style="height:auto">
				检索条件: <input class="easyui-validatebox" type="text" id="searchKey"
					onchange="loadEmployeeGird(this.value)"
					data-options="required:false" />
			</div>
			<div data-options="region:'center'">
				<table id="gridEmployee" class="easyui-datagrid"
					data-options="
			sortOrder:'desc',
			sortName:'employeeCode',
			remoteSort:false,
			idField:'id',
			fit:true,
			singleSelect:true,
			collapsible:true,
			url:'<%=path%>/employee/loadAll/',
			toolbar:'#tbEmployee',
			striped: true,
			rownumbers:true">
					<thead>
						<tr>
							<th data-options="field:'employeeCode',width:160,sortable:true">工号</th>
							<th data-options="field:'name',width:180,sortable:true">姓名</th>
						</tr>
					</thead>
				</table>

			</div>
		</div>
	</div>

	<!-- 添加考勤窗體 -->
	<div id="dlgSpecial" class="easyui-dialog" title="添加考勤"
		style="width:280px;height:180px;padding:10px"
		data-options="
				closed: true,
				modal: true,
				iconCls: 'icon-save',				
				buttons: [{
					text:'確定',
					iconCls:'icon-ok',
					handler:function(){
						save();
					}
				},{
					text:'取消',
					iconCls:'icon-cancel',
					handler:function(){
						$('#dlgSpecial').dialog('close');
					}
				}]
			">
		<form id="formSpecial" method="post">
			<table>
				<tr>
					<td>员工:</td>
					<td><input id="employeeId" name="employeeId"
						class="easyui-validatebox" type="hidden" /> <input
						id="employeeName" class="easyui-validatebox" type="text"
						data-options="required:false,missingMessage:'请选择'"
						readonly="readonly" onclick="selectEmployee()" /> <a href="#"
						class="easyui-linkbutton"
						data-options="iconCls:'icon-add',plain:true"
						onclick="selectEmployee()"></a></td>
				</tr>
				<tr>
					<td>日期:</td>
					<td><input id="specialcardDate" name="cardDate"
						data-options="showSeconds:true,required:true"
						class="easyui-datetimebox" type="text" />
					</td>
				</tr>
				<tr>
					<td>原因:</td>
					<td><input id="specialReason" name="reason"
						data-options="required:true" class="easyui-validatebox"
						type="text" />
					</td>
				</tr>

			</table>
		</form>
	</div>

	<!-- 部门 -->
	<div data-options="region:'west',split:true" style="width:160px;">
		<table id="treeDepartment" class="easyui-treegrid"
			data-options="
				fit:true,
				url: '<%=path%>/department/loadAll',
				idField: 'id',
				treeField: 'name',
				onLoadSuccess: search,
				onClickRow: search,
				queryParams:{id:2}
			">
			<thead>
				<tr>
					<th data-options="field:'name'" width="140">部门名称</th>
				</tr>
			</thead>
		</table>
	</div>

	<!-- 工具栏 -->
	<div id="tb" style="height:auto">
		<div>
			<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
				onclick="show()">添加</a> <a href="#" class="easyui-linkbutton"
				iconCls="icon-remove" plain="true" onclick="del()">删除</a> <a
				href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true"
				onclick="showUpload()">导入</a> <a href="#" class="easyui-linkbutton"
				iconCls="icon-print" plain="true" onclick="print()">打印预览</a>
		</div>
		<div>
			录入时间从： <input id="selectStartDate" class="easyui-datebox"
				data-options="onSelect:search" /> 到： <input id="selectEndDate"
				class="easyui-datebox" data-options="onSelect:search" /> 检索条件: <input
				class="easyui-validatebox" type="text" id="searchName"
				onchange="search()" />
		</div>
	</div>
	<div data-options="region:'center'">
		<table id="grid" class="easyui-datagrid"
			data-options="
			sortOrder:'desc',
			sortName:'date',
			remoteSort:false,
			idField:'id',
			fit:true,
			singleSelect:true,
			collapsible:true,
			url:'<%=path%>/special/loadAll/',
			toolbar:'#tb',
			striped: true,
			pageSize:20,
			pagination:true,
			fitColumns:false,
			rownumbers:true
			">
			<thead>
				<tr>
					<th data-options="field:'departmentName',width:100,align:'left'">部门</th>
					<th data-options="field:'employeeCode',width:100,align:'left'">工号</th>
					<th data-options="field:'employeeName',width:100,align:'left'">姓名</th>
					<th
						data-options="field:'date',width:80,align:'left',formatter:formatDate">添加日期</th>
					<th data-options="field:'cardDate',width:120,align:'left'">考勤始时间</th>
					<th data-options="field:'reason',width:200,align:'left',fixed:true">原因</th>
				</tr>
			</thead>
		</table>

	</div>
</body>
</html>